<template>
    <div class="homes">
        <mLoading :showLoading="showLoading"></mLoading>
        <van-nav-bar :title="reportName" left-arrow @click-left="onClickLeft">
            <template #right>
                <div class="nav-right" @click="pickDate">{{times}}</div>
            </template>
        </van-nav-bar>

        <van-tabs v-model:active="active" @click-tab="onClickTab" animated>
            <van-tab v-for="(item, index) in tabs" :key="index" :title="item.reportName"></van-tab>
        </van-tabs>

        <div class="table-content">
            <div class="left-part">
                <div class="region" :style="'height:' + areaHeight + 'px'" v-if="title1Data.length == 1">
                    <span class="superior" v-if="areaLevel >= 1" @click="backLevel">上级</span>
                    区域
                </div>
                <div class="region-t" :style="'height:' + areaHeight + 'px'" v-else>
                    <span class="superior" v-if="areaLevel >= 1" @click="backLevel">上级</span>
                    区域
                </div>
                <div class="region1" v-for="(item,index) in leftData" :key="index" @click="onDrillDown(item)" :style="{'height':(item.height)+'px','text-align':'center'}">
                    {{item.areaName}}
                </div>
            </div>
            <div class="right-part">
                <div class="regions" v-if="title1Data.length == 1">
                    <!-- <div v-for="(item,index) in title2Data" :key="index"> -->
                    <div class="regions">
                        <div v-for="(item1,index1) in title2Data" :style="{'width':(item1.width)+'px', 'height':(item1.height)+'px'}" :key="index1">
                            <span>{{item1.name}}</span>
                        </div>
                        <!-- <span v-for="(item1,index1) in title2Data" :style="{'width':(item1.width)+'px'}" :key="index1">{{item1.name}}</span> -->
                    </div>
                    <!-- </div> -->
                </div>
                <div class="regions-t" v-else>
                    <div>
                        <div class="regions">
                            <!-- <span :class="index==title1Data.length - 1 ? '' : 'title1Style'" v-for="(item,index) in title1Data" :key="index" :style="{'width':item.width+'px'}"> {{item.name}}</span> -->
                            <div :class="index==title1Data.length - 1 ? '' : 'title1Style'" v-for="(item,index) in title1Data" :key="index" :style="{'width':item.width+'px', 'height':item.height+'px'}">
                                <span>{{item.name}}</span>
                            </div>
                        </div>
                        <div class="regions">
                            <!-- <span v-for="(item1,index1) in title2Data" :key="index1" :style="{'width':(item1.width)+'px'}">{{item1.name}}</span> -->
                            <div v-for="(item1,index1) in title2Data" :key="index1" :style="{'width':(item1.width)+'px',  'height':item1.height+'px'}">
                                <span>{{item1.name}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="region2" v-for="(item,index) in rightData" :key="index"> -->
                <div class="region2" v-for="(item1,index1) in rightData" :key="index1">
                    <!-- <div v-for="(item2,index2) in item1" :key="index2" :style="{'line-height':(item2.height)+'px','width':(item2.width)+'px','height':(item2.height)+'px','text-align':'center'}">
                        <span :class="markRed(item2.value)"> -->
                    <div v-for="(item2,index2) in item1" :key="index2" class="text1" :style="{'line-height':(item2.height)+'px','height':(item2.height)+'px','width':(item2.width)+'px','text-align':'center'}" :class="markRed(item2.value)">
                        {{formatNumber(item2.value)}}
                        <img src="@/assets/q2Markert/question.png" v-if="item2.color == 'green'" class="green" />
                        <img src="@/assets/q2Markert/red_flag.png" v-else-if="item2.color == 'red'" class="green" />
                        <img v-else class="green" src="" alt="" />
                        <!-- </span> -->
                        <!-- </div> -->
                    </div>
                </div>
            </div>
        </div>
        <div class="circle" @mousedown="down" @touchstart="down" @mousemove="move" @touchmove="move" @mouseup="end" @touchend="end" ref="divDom">
            <circleEcharts :index="3" />
        </div>
        <van-popup v-model:show="showPicker" position="bottom">
            <van-datetime-picker v-model="currentDate" type="date" :formatter="formatter" :min-date="minDate" :max-date="maxDate" @cancel="cancel" @confirm="confirm" />
        </van-popup>
    </div>

</template>

<script>
import { Toast } from "vant"
import "@/api/index"
import { mapGetters } from "vuex"
import { ref, reactive, toRefs, onMounted, watch } from "vue"
import { useRouter } from "vue-router" //1.引入useRoute
import { useStore } from "vuex"
import GetNetUtil from "@/utils/GetNetUtil"
import {dealTitleWidthAndHeight, dealAreasWidthAndHeight} from '@/utils/TableDataUtil'
import circleEcharts from "@/components/circleEcharts.vue"
import mLoading from "@/components/mLoading.vue"
export default {
    components: {
        circleEcharts,
        mLoading
    },
    setup() {
        const active = ref(0)
        const router = useRouter()
        const store = useStore()
        const state = reactive({
            //tab请求参数
            params: {
                token: "",
                user4a: ""
            },
            //报表请求参数
            reportParams: {
                token: "",
                date: "",
                reportId: "",
                level: "",
                areaCode: "",
                user4a: ""
            },
            tabs: [],
            firstTab: {},
            reportName:'',
            reports: [],
            titleDatas: [],
            areasDatas: [],
            titles2Datas: [],
            showPicker: false,
            showLoading: false,
            day: "",
            reportId: "",
            areaId: "",
            areaLevel: "",
            cacheAreaLevels: [],
            cacheAreaIds: [],
            level: 0,
            dataType: "",
            descConts: "",
            theight: 40,
            title: "",
            titles1: [],
            titles2: [],
            areaHeight: 0,
            leftData: [],
            rightData: [],
            title1Data: [],
            title2Data: [],
            currentGroup: 0,
            currentDate: "",
            minDate: new Date(2021, 0, 1),
            maxDate: "",
            times: "",
            reportDesc: "",
            flags: false, //控制使用
            position: {
                x: 0,
                y: 0
            },
            nx: "",
            ny: "",
            dx: "",
            dy: "",
            xPum: "",
            yPum: ""
        })
        const divDom = ref(null)
        function down(event) {
            state.flags = true
            var touch
            if (event.touches) {
                touch = event.touches[0]
            } else {
                touch = event
            }
            state.position.x = touch.clientX
            state.position.y = touch.clientY
            state.dx = divDom.value.offsetLeft
            state.dy = divDom.value.offsetTop
        }
        function move(event) {
            if (state.flags) {
                var touch
                if (event.touches) {
                    touch = event.touches[0]
                } else {
                    touch = event
                }
                state.nx = touch.clientX - state.position.x
                state.ny = touch.clientY - state.position.y
                state.xPum = state.dx + state.nx
                state.yPum = state.dy + state.ny
                let width = window.innerWidth - divDom.value.offsetWidth //屏幕宽度减去自身控件宽度
                let height = window.innerHeight - divDom.value.offsetHeight //屏幕高度减去自身控件高度
                state.xPum < 0 && (state.xPum = 0)
                state.yPum < 0 && (state.yPum = 0)
                state.xPum > width && (state.xPum = width)
                state.yPum > height && (state.yPum = height)
                // if (this.xPum >= 0 && this.yPum >= 0 && this.xPum<= width &&this.yPum<= height) {
                divDom.value.style.left = state.xPum + "px"
                divDom.value.style.top = state.yPum + "px"
                // }
                //阻止页面的滑动默认事件
                document.addEventListener(
                    "touchmove",
                    function () {
                        // event.preventDefault()
                    },
                    false
                )
            }
        }
        //鼠标释放时候的函数
        function end() {
            state.flags = false
        }
        function getParams() {
            const params = router.currentRoute.value.params
            state.params.token = params.token
            state.params.user4a = params.user4A
            state.reportParams.token = params.token
            state.reportParams.user4a = params.user4A
            state.reportParams.areaCode = store.getters.areaId
            state.cacheAreaIds.push(store.getters.areaId)
        }
        //请求tab接口
        function requestReportList() {
            const params = state.params
            GetNetUtil.requestPost(
                _const.holidayQ2ReportListUrl,
                "",
                params,
                getTab
            )
        }
        function _formatText(text) {
            return text.replace(/xxNxx/g, "<br/>")
        }
        function markRed(num) {
            if (num[0] === "-") {
                return "red"
            } else {
                return ""
            }
        }

        const pickDate = () => (state.showPicker = true)
        const formatter = (type, val) => {
            if (type === "year") {
                return `${val}年`
            }
            if (type === "month") {
                return `${val}月`
            }
            if (type === "day") {
                return `${val}日`
            }
            return val
        }

        function _formatDate(date) {
            return (
                date.substr(0, 4) +
                "/" +
                date.substr(4, 2) +
                "/" +
                date.substr(6, 2)
            )
        }
        function formatTitleDate(date) {
            let month = date.substr(4, 2)
            let day = date.substr(6, 2)
            if (month.indexOf("0") === 0) {
                month = month.substr(1, 1)
            }
            if (day.indexOf("0") === 0) {
                day = day.substr(1, 1)
            }
            return date.substr(0, 4) + "年" + month + "月" + day + "日"
        }

        const cancel = () => (state.showPicker = false)
        function confirm(val) {
            let currentDate = val
            let selectDate =
                currentDate.getFullYear() +
                "年" +
                (currentDate.getMonth() + 1) +
                "月" +
                currentDate.getDate() +
                "日"
            state.times = selectDate
            state.showPicker = false
            state.day =
                currentDate.getFullYear() +
                "" +
                _addZero(currentDate.getMonth() + 1) +
                "" +
                _addZero(currentDate.getDate())
            state.reportParams.date = state.day
            requestReportJsonData()
        }

        function _addZero(data) {
            if (data < 10) {
                return "0" + data
            } else {
                return data
            }
        }
        async function getTab(result) {
            const data = result.data
            if (data.length > 0) {
                //tab不为空，就获取第一个数据来请求接口
                const firstItem = data[0]
                state.firstTab = firstItem
                state.reportName = firstItem.reportName
                state.reportParams.date = firstItem.endTime
                state.reportParams.reportId = firstItem.reporId
                state.reportParams.level = ""
                state.areaLevel = firstItem.areaLevel
                state.level = firstItem.areaLevel

                state.times = formatTitleDate(firstItem.endTime)
                state.currentDate = new Date(_formatDate(firstItem.endTime))
                state.maxDate = new Date(_formatDate(firstItem.endTime))
                state.day = firstItem.endTime
                requestReportJsonData()
            }
            state.tabs = data
        }
        //请求报表数据
        function requestReportJsonData() {
            state.showLoading = true
            const params = state.reportParams
            // GetNetUtil.requestPost(
            //     _const.holidayQ2ReportDataUrl,
            //     "",
            //     params,
            //     getReport
            // )
            GetNetUtil.requestPost(
                _const.holidayQ2ReportDataUrl,
                "",
                params,
                dealReportData
            )
        }

        // async function getReport(result) {
        //     var data = result.data
        //     if (state.dataType == "C") {
        //         state.descConts = data.desc.conts
        //         return
        //     }
        //     var list = data.list
        //     console.log("--- data.title1--" + data.title1)
        //     var title1 = data.title1.split(",")
        //     var title2 = data.title2.split(",")
        //     var listTemp = []
        //     for (var i = 0; i < list.length; i++) {
        //         //去除前两项

        //         var listItem = []
        //         for (var j = 1; j < list[i].length; j++) {
        //             listItem.push(list[i][j])
        //         }
        //         listTemp.push(listItem)
        //     }
        //     var title1Temp = []
        //     if (title1 == "") {
        //         for (var j = 3; j < title2.length; j++) {
        //             title1Temp.push(" ")
        //         }
        //     } else {
        //         for (var i = 3; i < title1.length; i++) {
        //             title1Temp.push(title1[i])
        //         }
        //     }

        //     var title2Temp = []
        //     for (var j = 3; j < title2.length; j++) {
        //         title2Temp.push(title2[j])
        //     }
        //     console.log("--title1---" + title1)
        //     console.log("--title2Temp---" + title2Temp)
        //     if (list.length == 0) {
        //         state.leftData = []
        //         state.rightData = []
        //         state.title1Data = []
        //         state.title2Data = []
        //         Toast("暂无数据", 1500)
        //         return
        //     }
        //     var areas = listTemp
        //     state.titles1 = title1Temp
        //     state.titles2 = title2Temp
        //     var isPingfenWidth = false
        //     if (state.titles2.length < 4) {
        //         isPingfenWidth = true
        //     } else {
        //         isPingfenWidth = false
        //     }
        //     regoupTitleRightData(areas, isPingfenWidth)
        // }
        /**
         * isPingfenWidth: 当表头的字段小于4，平分整个宽度
         * 算法：估算每个字体的大小为9,这样每个单元格的宽度大小为字符串长度 *7
         * 单元格合并表头
         */
        // function regoupTitleRightData(areas, isPingfenWidth) {
        //     var defaultFontSize = 7
        //     var arr = []
        //     var data = state.titles1
        //     for (var i = 0; i < data.length; i++) {
        //         var count = 0
        //         for (var j = i; j < data.length; j++) {
        //             if (data[i] == data[j]) {
        //                 count++
        //             }
        //         }
        //         arr.push({
        //             plName: data[i],
        //             count: count
        //         })
        //         i += count - 1
        //     }
        //     var title1Data = []
        //     var title2Data = []
        //     var flag = 0
        //     var height = 0

        //     for (var k = 0; k < arr.length; k++) {
        //         var temp = []
        //         var jsonTitle1 = {}
        //         jsonTitle1.name = arr[k].plName
        //         if (isPingfenWidth) {
        //             jsonTitle1.width =
        //                 (screenWidth - 100) / state.titles2.length
        //         } else {
        //             jsonTitle1.width =
        //                 getStrLength2(arr[k].plName) * defaultFontSize
        //         }

        //         title1Data.push(jsonTitle1)

        //         for (var t = 0; t < arr[k].count; t++) {
        //             var jsonTitle2 = {}
        //             jsonTitle2.name = state.titles2[t + flag]
        //             if (isPingfenWidth) {
        //                 jsonTitle2.width =
        //                     (screenWidth - 100) / state.titles2.length
        //             } else {
        //                 jsonTitle2.width =
        //                     getStrLength(state.titles2[t + flag]) *
        //                     defaultFontSize
        //             }

        //             temp.push(jsonTitle2)
        //         }
        //         flag += arr[k].count
        //         title2Data.push(temp)
        //     }
        //     var leftData = []
        //     var rightData = []
        //     // console.log('areas---' + areas);
        //     for (var i = 0; i < areas.length; i++) {
        //         var json = {}
        //         json.areaId = areas[i][0].value //第一个是value
        //         // if (this.state.cacheAreaIds.length >1){
        //         json.level =
        //             parseInt(state.level) +
        //             parseInt(state.cacheAreaLevels.length)
        //         // console.log("-----" + json.level);
        //         // console.log("-----" + json.areaId);
        //         // }
        //         json.areaName = areas[i][1].value
        //         if (areas[i][1].value.length > 6) {
        //             height = 44
        //         } else {
        //             height = 26
        //         }
        //         json.height = height
        //         leftData.push(json)

        //         var values = []
        //         var colors = []
        //         var colorsType = []
        //         for (var j = 2; j < areas[i].length; j++) {
        //             // console.log("++++" + areas[i][j]);
        //             values.push(areas[i][j].value)
        //             colors.push(areas[i][j].color)
        //             colorsType.push(areas[i][j].colorTpye)
        //         }

        //         // var areaId = areas[i].areaId;
        //         // var areaName = areas[i].areaName;
        //         // var level = areas[i].level;
        //         // json.areaLevel = level;
        //         var rightItem = []
        //         var flagItem = 0

        //         for (var k = 0; k < arr.length; k++) {
        //             var rightItemItem = []
        //             var length1 = 0
        //             var length2 = 0
        //             if (isPingfenWidth) {
        //                 length1 = (screenWidth - 100) / state.titles2.length
        //             } else {
        //                 length1 = title1Data[k].width
        //             }

        //             for (var t = 0; t < arr[k].count; t++) {
        //                 if (isPingfenWidth) {
        //                     length2 +=
        //                         (screenWidth - 100) / state.titles2.length
        //                 } else {
        //                     length2 +=
        //                         getStrLength2(state.titles2[t + flagItem]) *
        //                         defaultFontSize
        //                 }
        //             }
        //             var title2Temp = title2Data[k]
        //             // console.log('')
        //             if (length1 < length2) {
        //                 for (var t = 0; t < arr[k].count; t++) {
        //                     var rightJson = {}
        //                     var index = 0
        //                     index = t + flagItem
        //                     rightJson.value = values[index]
        //                     rightJson.color = colors[index]
        //                     rightJson.colorType = colorsType[index]
        //                     if (isPingfenWidth) {
        //                         rightJson.width =
        //                             (screenWidth - 100) / state.titles2.length
        //                     } else {
        //                         rightJson.width =
        //                             getStrLength(state.titles2[index]) *
        //                             defaultFontSize
        //                     }

        //                     rightJson.height = height
        //                     rightItemItem.push(rightJson)
        //                     if (isPingfenWidth) {
        //                         title2Data[k][t].width =
        //                             (screenWidth - 100) / state.titles2.length
        //                     } else {
        //                         title2Data[k][t].width =
        //                             getStrLength(state.titles2[index]) *
        //                             defaultFontSize
        //                     }
        //                 }
        //             } else {
        //                 for (var t = 0; t < arr[k].count; t++) {
        //                     var rightJson = {}
        //                     rightJson.value = values[t + flagItem]
        //                     // rightJson.areaId = areaId;
        //                     // rightJson.areaName = areaName;
        //                     rightJson.height = height
        //                     if (t == arr[k].count - 1) {
        //                         var temp = 0
        //                         temp = length1 - length2
        //                         var lastValue = 0
        //                         if (isPingfenWidth) {
        //                             lastValue =
        //                                 temp +
        //                                 (screenWidth - 100) /
        //                                     state.titles2.length
        //                         } else {
        //                             lastValue =
        //                                 temp +
        //                                 getStrLength2(
        //                                     state.titles2[t + flagItem]
        //                                 ) *
        //                                     defaultFontSize
        //                         }

        //                         rightJson.width = lastValue
        //                         title2Data[k][t].width = lastValue
        //                     } else {
        //                         if (isPingfenWidth) {
        //                             title2Data[k][t].width =
        //                                 (screenWidth - 100) /
        //                                 state.titles2.length
        //                             rightJson.width =
        //                                 (screenWidth - 100) /
        //                                 state.titles2.length
        //                         } else {
        //                             title2Data[k][t].width =
        //                                 getStrLength(
        //                                     state.titles2[t + flagItem]
        //                                 ) * defaultFontSize
        //                             rightJson.width =
        //                                 getStrLength(
        //                                     state.titles2[t + flagItem]
        //                                 ) * defaultFontSize
        //                         }
        //                     }
        //                     rightItemItem.push(rightJson)
        //                 }
        //             }
        //             rightItem.push(rightItemItem)
        //             flagItem += arr[k].count
        //         }
        //         rightData.push(rightItem)
        //     }
        //     state.title1Data = title1Data
        //     state.title2Data = title2Data
        //     state.leftData = leftData
        //     state.rightData = rightData
        //     state.theight = height
        //     console.log("state.rightData", state.rightData)
        // }

        async function dealReportData(result) {
            state.showLoading = false
            var data = result.data
            if (state.dataType == "C") {
                state.descConts = data.desc.conts
                return
            }
            var list = data.list
            var title1 = data.title1.split(",")
            var title2 = data.title2.split(",")
            if (list.length == 0) {
                state.leftData = []
                state.rightData = []
                state.title1Data = []
                state.title2Data = []
                Toast("暂无数据", 1500)
                return
            }
            let totalData =  dealTitleWidthAndHeight(title1, title2, 3, 8, 10, 20, 80, 60)
            let valueData = dealAreasWidthAndHeight(list, totalData.title2Data, 3, 6, 100, 28, 1, 2, -1, parseInt(state.level), state.cacheAreaLevels.length)
            // dealAreasWidthAndHeight(list, totalData.title2Data)
            state.title1Data = totalData.title1Data
            state.title2Data = totalData.title2Data
            state.leftData = valueData.leftData
            state.rightData = valueData.rightData
            state.areaHeight = totalData.areaHeight
        }

        /**
         * 计算表头title的宽高
         * 1、去除前几项无效数据
         * 2、计算title2的单元格宽高
         * 3、根据title2的宽高来计算title1宽高
         * 3.1 判断title1的单元格宽度是否比title2的单元格宽度
         * 4、计算区域的高度
         * @param {*} title1
         * @param {*} title2
         */
        // function dealTitleWidthAndHeight(title1, title2) {
        //     let offSetIndex = 3 //去除前两项
        //     let defaultFontSize = 10 //默认一个文字占位大小
        //     let tempTitle1 = title1.splice(offSetIndex)
        //     let tempTitle2 = title2.splice(offSetIndex)
        //     let screenWidth = document.body.clientWidth //获取屏幕宽度

        //     console.log(tempTitle1)
        //     console.log(tempTitle2)
        //     //2.计算title2的单元格宽高
        //     let title1Data = [],
        //         title2Data = []
        //     // 判断title2的长度，如果小于4，就平分屏幕
        //     let isAverageWidth = tempTitle2.length < 4
        //     let averageWidth = (screenWidth - 100) / tempTitle2.length

        //     //表格最大宽度,默认单元格高度
        //     let maxWidth = isAverageWidth ? averageWidth : 100,
        //         title2Height = 25,
        //         defaultHeight = 25

        //     //2.1 循环计算title2的单元格的宽高
        //     for (let index = 0; index < tempTitle2.length; index++) {
        //         let title2Dict = {}
        //         const element = tempTitle2[index]
        //         title2Dict.name = element
        //         var width = getStrLength(element) * defaultFontSize
        //         //对于宽度太小的，给个固定的宽度
        //         width = width < 60 ? 60 : width
        //         var height = defaultHeight
        //         //如果计算的宽度大于单元格最大宽度，换行处理
        //         if (width > maxWidth) {
        //             height = defaultHeight * Math.ceil(width / maxWidth)
        //             //保证title2单元格的高度保持一致
        //             title2Height =
        //                 title2Height >= height ? title2Height : height
        //             width = maxWidth
        //         }
        //         title2Dict.width = width + 10
        //         title2Dict.height = title2Height
        //         title2Data.push(title2Dict)
        //     }
        //     console.log("title1")

        //     console.log(title2Data)
        //     //3. 循环计算title1的单元格的宽高
        //     //3.1 如果title1为空的话
        //     if (title1.length == 1) {
        //         let title1Dict = { width: 0, height: 0, name: null }
        //         title1Data.push(title1Dict)
        //     } else {
        //         //3.1 如果title1不为空的话,需要找到数组数据重复数据的起始位置和长度
        //         let sameData = findArraySameDataWithIndex(tempTitle1)
        //         console.log(sameData)
        //         //3.2 循环取出title2中的重复数据的起始位置和长度
        //         for (let index1 = 0; index1 < sameData.length; index1++) {
        //             const sameItem = sameData[index1]
        //             //3.3 根据title1的宽度来计算title1的宽度
        //             let title1Dict = {},
        //                 width = 0

        //             //3.4 如果title1的长度为1，需要单独计算下title1的宽度
        //             let onlyOneTitle1Width = 0
        //             if (sameItem.length == 1) {
        //                 onlyOneTitle1Width = getStrLength(sameItem.name) * 10
        //             }

        //             //3.5 根据数据的起始位置和长度来取出title2中对应的数据
        //             let index2Length = sameItem.startIndex + sameItem.length
        //             for (
        //                 let index2 = sameItem.startIndex;
        //                 index2 < index2Length;
        //                 index2++
        //             ) {
        //                 console.log(
        //                     "index2=" + index2 + "总长度" + index2Length
        //                 )
        //                 const title2Item = title2Data[index2]
        //                 title2Item.width =
        //                     title2Item.width > onlyOneTitle1Width
        //                         ? title2Item.width
        //                         : onlyOneTitle1Width
        //                 width += title2Item.width
        //             }

        //             title1Dict.width = width
        //             title1Dict.height = defaultHeight
        //             title1Dict.name = sameItem.name
        //             title1Data.push(title1Dict)
        //         }
        //     }
        //     console.log(title2Data)
        //     console.log("title1Data")

        //     console.log(title1Data)
        //     //4. 计算区域(总表头)高度
        //     let title1Item = title1Data[0],
        //         title2Item = title2Data[0]
        //     let areaHeight = title1Item.height + title2Height
        //     return {
        //         title1Data: title1Data,
        //         title2Data: title2Data,
        //         areaHeight: areaHeight
        //     }
        // }

        /**
         * 计算数组相同元素的起始位置和相同元素的长度
         * @param {*} array
         */
        // function findArraySameDataWithIndex(array) {
        //     let length = 1,
        //         startIndex = 0,
        //         sameData = []
        //     for (let index = 0; index < array.length; index++) {
        //         const element = array[index]
        //         const afElement =
        //             index == array.length - 1 ? null : array[index + 1]
        //         if (element == afElement) {
        //             length = length + 1
        //             if (index == array.length - 1) {
        //                 let sameDict = {}
        //                 sameDict.startIndex = startIndex
        //                 sameDict.length = length
        //                 sameDict.name = element
        //                 sameData.push(sameDict)
        //             }
        //         } else {
        //             let sameDict = {}
        //             sameDict.startIndex = startIndex
        //             sameDict.length = length
        //             sameDict.name = element
        //             sameData.push(sameDict)

        //             //重置角标和长度
        //             startIndex = index + 1
        //             length = 1
        //         }
        //     }
        //     return sameData
        // }

        /**
         * 计算表格数据的宽高
         * 1、计算左边地区宽度和高度
         * 2、根据title2的宽度和地区的高度来计算右侧value的宽高
         */
        // function dealAreasWidthAndHeight(list, title2Data) {
        //     let offSetIndex = 3 //去除前两项
        //     let defaultFontSize = 10 //默认一个文字占位大小
        //     let defaultAreaWidth = 100,
        //         defaultAreaHeight = 30 //左侧区域默认宽度100, 高度28
        //     // console.log(list)
        //     let leftData = [],
        //         rightData = []

        //     for (let index = 0; index < list.length; index++) {
        //         const element = list[index]
        //         let areaItem = {}
        //         let width = getStrLength(element[2].value) * defaultFontSize
        //         let height = defaultAreaHeight
        //         //1. 计算leftData
        //         //1.1 对于宽度超过的默认宽度的，换行处理，不足的按照默认宽度处理
        //         if (width > defaultAreaWidth) {
        //             height =
        //                 Math.ceil(width / defaultAreaWidth) * defaultAreaHeight
        //         }
        //         width = defaultAreaWidth

        //         areaItem.areaId = element[1].value
        //         areaItem.areaName = element[2].value
        //         areaItem.level =
        //             parseInt(state.level) +
        //             parseInt(state.cacheAreaLevels.length)
        //         areaItem.width = width
        //         areaItem.height = height

        //         leftData.push(areaItem)

        //         //2.计算rightData
        //         let rightSmallData = []
        //         for (
        //             let index2 = offSetIndex;
        //             index2 < element.length;
        //             index2++
        //         ) {
        //             const valueItem = element[index2]
        //             //2.1 获取title2的宽度
        //             const title2Item = title2Data[index2 - offSetIndex]
        //             //value宽度=表头对应的宽度
        //             valueItem.width = title2Item.width
        //             //value高度=地区的高度
        //             valueItem.height = areaItem.height

        //             rightSmallData.push(valueItem)
        //         }
        //         rightData.push(rightSmallData)
        //     }
        //     console.log(leftData)
        //     // console.log(rightData)
        //     return {
        //         leftData: leftData,
        //         rightData: rightData
        //     }
        // }

        function getStrLength(str) {
            var len = 0
            for (var i = 0; i < str.length; i++) {
                if (str.charCodeAt(i) > 127 || str.charCodeAt(i) == 94) {
                    len += 2
                } else {
                    len++
                }
            }
            if (len < 11) {
                return len * 1.1
            } else if (len < 15) {
                return len / 1.1
            } else {
                return len / 1.3
            }
        }
        function getStrLength2(str) {
            var len = 0
            for (var i = 0; i < str.length; i++) {
                if (str.charCodeAt(i) > 127 || str.charCodeAt(i) == 94) {
                    len += 2
                } else {
                    len++
                }
            }

            return len
        }
        function formatNumber(num) {
            if (num[0] === ".") {
                return parseFloat(num)
            } else if (num[0] === "-" && num[1] === ".") {
                return num.slice(0, 1) + "0" + num.slice(1)
            } else if (
                (num > 10000 && num < 100000000) ||
                (num < -10000 && num > -100000000)
            ) {
                if (
                    (state.name === "收入" && store.state.foldId === "2") ||
                    (state.name === "集团欠费" && store.state.foldId === "6")
                ) {
                    return num
                } else {
                    return (num / 10000).toFixed(2) + "万"
                }
            } else if (num > 100000000) {
                return (num / 100000000).toFixed(2) + "亿"
            } else if (num.indexOf(".00") != -1) {
                return parseInt(num)
            } else {
                return num
            }
        }
        //事件处理
        function onClickTab({ name, title }) {
            const item = state.tabs[name]
            console.log(item)
            // state.reportParams.date = item.endTime
            state.reportParams.reportId = item.reporId
            state.reportParams.level = ""
            state.reportParams.areaCode = ""
            state.areaLevel = ""
            state.level = ""
            state.reportName = item.reportName
            state.cacheAreaIds.push(store.getters.areaId)
            requestReportJsonData()
        }

        const onClickLeft = () => history.back()

        function backLevel() {
            let areaIds = state.cacheAreaIds
            console.log(state.cacheAreaIds)
            state.areaLevel = (state.areaLevel - 1).toString()
            let ss = areaIds.splice(areaIds.length - 1, 1)
            let areaId1 = areaIds[areaIds.length - 1]
            state.reportParams.level = state.areaLevel
            state.reportParams.areaCode = areaId1
            state.areaId = areaId1
            state.level--
            console.log("state.areaId", areaId1)
            requestReportJsonData()
        }
        function onDrillDown(item) {
            store.commit("setPrevAreaId", item.areaId)
            let areaLevel = state.level
            if (areaLevel == 3) {
                Toast("区域下钻已到最低粒度", 1500)
                return
            }

            if (
                item.areaName === "全省" ||
                // index == 0 ||
                item.areaName.indexOf("不详") != -1
            ) {
                return
            }
            if (item.areaLevel > 2) {
                Toast("区域下钻已到最低粒度", 1500)
                return
            }
            areaLevel++
            state.cacheAreaIds.push(item.areaId)
            console.log(state.cacheAreaIds)
            const cachelevelId = parseInt(areaLevel)
            // parseInt(item.areaLevel) + 1
            state.reportParams.level = cachelevelId.toString()
            state.reportParams.areaCode = item.areaId
            state.level = areaLevel
            state.areaLevel = areaLevel
            // state.level++
            console.log("areaLevel", areaLevel)
            requestReportJsonData()
        }
        onMounted(() => {
            getParams()
            requestReportList()
        })
        return {
            active,
            ...toRefs(state),
            onClickLeft,
            onClickTab,
            getStrLength,
            formatNumber,
            _formatText,
            markRed,
            onDrillDown,
            backLevel,
            _addZero,
            confirm,
            cancel,
            formatTitleDate,
            pickDate,
            formatter,
            move,
            down,
            end,
            divDom
        }
    }
}
</script>

<style lang="scss" scoped>
.homes {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.table-content {
    width: 100%;
    position: relative;
    display: flex;
    margin-top: 1px;
    overflow: auto;
    .left-part {
        width: 100px;
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        .region {
            width: 100px;
            background: #45b8fb;
            color: #ffffff;
            font-size: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .region-t {
            width: 100px;
            // line-height: 60px;
            background: #45b8fb;
            color: #ffffff;
            // text-align: center;
            font-size: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .region1 {
            width: 100px;
            // height: 30px;
            // padding-top: 10px;
            background: #ffffff;
            color: #45b8fb;
            // text-align: center;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .region1:nth-child(2n) {
            background: #dedede;
        }
    }
    .right-part {
        flex: 1;
        // padding-left: 100px;
        .regions {
            display: flex;
            flex-direction: row;
            width: calc(100% - 1px);
            flex-wrap: nowrap;
            align-items: center;
            background: #45b8fb;
            color: #ffffff;
            text-align: center;
            border-left: 1px solid #ffffff;
            align-items: center;
            font-size: 12px;
            div {
                // margin-top:10px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            span {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 95%;
                // height: 30px;
                // margin: 0 10px;
            }

            .title1Style {
                border-right: 1px solid #ffffff;
            }
        }
        .regions-t {
            display: flex;
            width: 100%;
            // height: 60px;
            flex-wrap: nowrap;
            background: #45b8fb;
            color: #ffffff;
            text-align: center;
            font-size: 12px;
            span {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 95%;
                // height: 30px;
                // margin: 0 10px;
            }
        }
        .region2 {
            display: flex;
            width: 100%;
            // line-height: 30px;
            // height: 30px;
            flex-wrap: nowrap;
            background: #ffffff;
            color: #333;
            text-align: center;
            font-size: 12px;

            div {
                // margin-top:10px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .text1 {
                display: inline-block;
                width: 95%;
                // height: 30px;
                // margin: 0 10px;
                text-align: center;
            }
            div.red {
                color: #f00;
            }
        }
        .text2 {
            display: inline-block;
            // width: 80px;
            // height: 30px;
            // margin: 0 10px;
            text-align: center;
        }
        .text2:nth-child(1) {
            width: 95px;
        }
        .region-values {
            display: flex;
            width: 100%;
            // line-height: 30px;
            // height: 60px;
            flex-wrap: nowrap;
            background: #45b8fb;
            color: #333;
            text-align: center;
            font-size: 12px;
        }
        .region-value {
            display: flex;
            width: 100%;
            // line-height: 30px;
            // height: 60px;
            flex-wrap: nowrap;
            background: #ffffff;
            color: #333;
            text-align: center;
            font-size: 12px;
            .text1 {
                display: inline-block;
                // width: 80px;
                // height: 60px;
                // line-height: 60px;
                // margin: 0 10px;
                text-align: center;
            }
            div.red {
                color: #f00;
            }
        }
        .region2:nth-child(2n) {
            background: #dedede;
        }
        .region-value:nth-child(2n) {
            background: #dedede;
        }
    }
}
::v-deep .van-tabs__line {
    background: #ffffff;
}
::v-deep .vxe-header--row {
    background: #3db4f8;
    color: #ffffff;
}
::v-deep .van-nav-bar__text {
    color: #ffffff;
}
.green {
    width: 10px;
    height: 10px;
}

img[src=""],
img:not([src]) {
    opacity: 0;
}
.circle {
    width: 80px;
    height: 80px;
    position: absolute;
    bottom: 5px;
    right: 10px;
    z-index: 9999;
}
.nav-right {
    font-size: 10px;
    color: #ffffff;
}
</style>
